<template>
	<view class="information-box">
  <view class="user-profile">
    <image class="avatar" :src="userInfo.avatar"></image>
    <view class="info">
      <text class="username">{{userInfo.username}}</text>
      <text class="bio">{{userInfo.bio}}</text>
      <view class="stats">
        <text class="stat">年龄：{{userInfo.followers}}</text>
        <text class="stat">生日：{{userInfo.following}} </text>
      </view>
    </view>
  </view>
  
  
 <view class="container-text">
  		<view class="text-zj">简介</view>
  <view class="text-zjone" >
{{content}}  
  </view>

  
  
  <view class="text-title">个人视频
  <image src="../../../static/icon/mine/设置.png" mode=""  @click="chooseVideo"></image>
  <image src="../../../static/icon/mine/关注.png" mode=""></image>
  </view>
  <view class="container-video"> 
  <scroll-view scroll-x>
  <view class="video-name" v-for="(item , index) in videolist" :key="item.id">
  <video  controls :src="item.video" @longpress="deleteVideo(item.id)"></video>
  </view>
  </scroll-view>
  </view>
  
  
  <view class="contauner-img">相册·合集</view>
  <view class="container-image">
  <scroll-view scroll-x="true">
  <view class="image-text">
  <image src="../../../static/icon/name.jpg"></image>
  </view>
  
  <view class="image-text">
  <image src="../../../static/icon/nameone.jpg"></image>
  </view>
  </scroll-view>
  </view>
  
  
  </view>
  </view>
  
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        username: '小意',
        avatar: '../../../static/icon/name.jpg',
        bio: '个人签名',
        followers: 22,
        following: "2001-04-26"
      },
	  
	isOpen: false,
	        content: '  这就是我们的故事。故事里的少年们生活在不算遥远的过去，一个青瓦小巷，墙皮斑驳的小城。那里阳光温暖却不浓烈。校门口的街边，总是弥漫着煎炸小食油腻腻的香气。男生们踩在发出各种声响的老旧自行车上高声谈笑，女生穿着永远宽大的校服，在婆娑的树影里微笑。风吹过身旁，才能看出她们瘦小纤细的轮廓……他们共同穿行在一段叫做高三的时光里。他们讨厌考试，担心分数。他们小心翼翼地喜欢着某人，但当亲密突然而至的时候又会怯而止步。他们好像有很多梦想，但是铺在前方的未来却很单调。他们总是愤力撞击着青春的牢笼！却找不到前行的方向……他们觉得一切很丑————他们觉得，一切很美。翻开这个故事，你就像按下了关机键。关掉这个世界的纷繁和所有不及回味的快节奏交流，你才会看到自己的剪影，在黑色屏幕里静静的反光。在那段想要回忆却几乎要遗忘的时光里，在那种含蓄、静默的美好里，重新奔跑、眺望……这是一个发生在上世纪九十年代末，一个平凡、宁静的南方小县城的故事。 讲述了几位小城的高三学生，在面对如山的学业压力间隙中，萌芽的梦想、友谊和初恋，以及他们和大人世界的那道鸿沟。 他们在成长中，幸福和痛苦同时蜕变、升华……',
	  
	  videolist:[
		  {
			id:1,
			video:"https://vod.pipi.cn/fe5b84bcvodcq1251246104/02c46d5f5285890796585099623/f0.mp4",
		  },
		  {
		  	id:2,
		  	video:"https://vod.pipi.cn/fe5b84bcvodcq1251246104/fc45e9615285890796588881560/f0.mp4",
		  
		  },
		  {
		  	id:3,
		  	video:"https://vod.pipi.cn/fe5b84bcvodcq1251246104/a3476b405285890796587331669/f0.mp4",
		  
		  },
		  {
		  	id:4,
		  	video:"https://vod.pipi.cn/d5457264vodtranscq1251246104/b0e19fd05285890812988002583/v.f42905.mp4",
		  
		  },
		  {
		  	id:5,
		  	video:"https://vod.pipi.cn/fec9203cvodtransbj1251246104/43bcb7103701925921495881188/v.f42905.mp4",
		  
		  }
	  ]
	  
    }
  },
  
  methods:{
	   chooseVideo() {
	          uni.chooseVideo({
	            success: res => {
	              // 上传视频到服务器，并获取服务器返回的视频地址
	              uni.uploadFile({
	                url: 'http://example.com/upload',
	                filePath: res.tempFilePath,
	                name: 'video',
	                success: res => {
	                  // 更新视频地址
	                  this.videolist.push(res.data)
	                }
	              })
	            }
	          })
	    },
		
		 deleteVideo(m) {
			 
			     uni.showModal({
			       title: '提示',
			       content: '确定要删除该视频吗？',
			       success: (res) => {
			         if (res.confirm) {
			           // 确定删除视频
					   // 向服务器发送删除请求
					   uni.request({
					     url: 'http://example.com/delete',
					     method: 'POST',
					     data: {
					       videoUrl: this.videolist.id
					     },
					     success: res => {
					       // 删除成功后清空videoUrl变量
					   	// arr.splice(index, 1)
						this.videolist = this.videolist.filter(item => item.id !== m);
						console.log(this.videolist.filter(item => item.id !== m))
					     }
					   })
			         }
			       }
			     });
		      },
			  
  }
}
</script>
<style lang="less"  scoped>
	.information-box{
		.user-profile {
			width: 90%;
			margin:  0 auto;
		  display: flex;
		  align-items: center;
		  margin-bottom: 20px;
		  
		  .avatar {
		    width: 80px;
		    height: 80px;
		    border-radius: 50%;
		    margin-right: 20px;
		  }
		  
		  .info {
		    display: flex;
		    flex-direction: column;
		    
		    .username {
		      font-size: 24px;
		      font-weight: bold;
		      margin-bottom: 10px;
		    }
		    .bio {
		      margin-bottom: 10px;
		    }
		    .stats {
		      display: flex;
		    }
		    .stat {
		      margin-right: 20px;
		      font-size: 16px;
		      color: #999;
		    }
		  }
		  
		}
		
		
		.container-text{
			
			.text-zj{
			    margin-left: 10px;
			    color: black;
			    font-weight: bold;
			    font-size: 14px;
			}
			.text-zjone{
			    padding: 0 25rpx;
			    font-size: 32rpx;
			   margin-top: 10px;
			    color: black;
			    display: -webkit-box;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 4;
			    overflow: hidden;
			}
			
			.text-title{
			    color:black;
			    margin-left: 10px;
			    margin-top: 20px;
			    font-weight: bold;
			    font-size: 14px;
				
				image{
					width: 20px;
					height: 15px;
					margin: -4px 10px;
				}
			}
			
			.container-video{
			    margin-top: 10px;
			    margin-left: -5px;
			    white-space: nowrap;
				
				.video-name{
				    margin-left:1px;
				    width: 100px;
				    height: 120px;
				  display: inline;
				}
				.video-name video{
				    width: 120px;
				    height: 80px;
				    margin-top: 10px;
				    margin-left: 15px;
				}
			}
		
			.contauner-img{
			    color: black;
			    margin-left: 10px;
			    margin-top: 20px;
			    font-weight: bold;
			    font-size: 14px;
			}
			
			
			
			.container-image{
			    margin-top: 10px;
			    margin-left: -5px;
			    white-space: nowrap;
				
				.image-text{
				    margin-left: 15px;
				    width: 120px;
				    height: 80px;
				    display: inline-block;
				}
				
				.image-text image{
				    width: 120px;
				    height: 80px;
				    border-radius: 14px;
				}
			}
			
		
			
		
		}
	}
	




</style>